<template>
    <!-- 数据中心/运营数据中心/仓库基础配置 -->
    <div class="basicConfigure">
        <div class="top_operation">
            <!-- 顶部四级联动选择器联动组件 -->
            <TopSelect
                ref="topSelect"
                @headChange="getHeadId"
                :isRegionShow="isRegionShow"
                @regionChange="getRegionId"
                :isCityShow="isCityShow"
                @cityChange="getCityId"
                :isWareShow="isWareShow"
                @wareChange="getWareId"
            ></TopSelect>

            <div class="every_operation">
                <span>创建人：</span>
                <a-input placeholder="请输入" v-model="createBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>创建时间：</span>
                <a-range-picker
                    v-model="createTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="createChange"
                    @ok="createOk"
                    :value="createTime"
                    style="width:195px;"
                />
            </div>
            <div class="every_operation">
                <span>修改人：</span>
                <a-input placeholder="请输入" v-model="updateBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>修改时间：</span>
                <a-range-picker
                    v-model="updateTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="editChange"
                    @ok="editOk"
                    :value="updateTime"
                    style="width:195px;"
                />
            </div>

            <div class="button_div" style="margin-top:10px;">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>
        
        <div class="add_btn">
            <!-- 右滑抽屉 -->
            <a-drawer
                :title="drawerTitle"
                :placement="placement"
                :closable="false"
                :visible="visible"
                @close="onClose"
                width="600"
            >
                <a-form-model
                    ref="ruleForm"
                    layout="horizontal"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <!-- labelAlign="left" -->
                    
                    <a-form-model-item ref="area" label="仓库面积" prop="area">
                        <a-input-number 
                            id="areaNumber" 
                            v-model="form.area" 
                            @change="areaChange"
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="capacity" label="最大箱数" prop="capacity">
                        <a-input-number 
                            id="capacityNumber" 
                            v-model="form.capacity" 
                            @change="capacityChange"
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入最大箱数"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="psBoxQty" label="PS运管箱数" prop="psBoxQty">
                        <a-input-number 
                            id="psBoxQtyNumber" 
                            v-model="form.psBoxQty" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入PS运管箱数"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="psMachineQty" label="PS运管机数" prop="psMachineQty">
                        <a-input-number 
                            id="psMachineQtyNumber" 
                            v-model="form.psMachineQty" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入PS运管机数"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="whRent" prop="whRent">
                        <span slot="label">
                            <a-popover>
                                <template slot="content">
                                <p style="margin:0">含全仓固定的租金、物业、水电、网络成本</p>
                                </template>
                                <img src="../../../assets/help_yellow.png" alt="" />
                            </a-popover>
                            <span> 仓库租金（元/月）</span>
                        </span>
                        <a-input-number 
                            id="whRentNumber" 
                            v-model="form.whRent" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入仓库租金"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="equipmentRent" label="设备租金（元/月）" prop="equipmentRent">
                        <a-input-number 
                            id="equipmentRentNumber" 
                            v-model="form.equipmentRent" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入设备租金"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="equipmentDepreciation" label="设备折旧（元/月）" prop="equipmentDepreciation">
                        <a-input-number 
                            id="equipmentDepreciationNumber" 
                            v-model="form.equipmentDepreciation" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入设备折旧"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="occupyBoxCost" label="占箱成本（元/月）" prop="occupyBoxCost">
                        <a-input-number 
                            id="occupyBoxCostNumber" 
                            v-model="form.occupyBoxCost"
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入占箱成本"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="occupyTrayCost" label="占拖成本（元/月）" prop="occupyTrayCost">
                        <a-input-number 
                            id="occupyTrayCostNumber" 
                            v-model="form.occupyTrayCost" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入占拖成本"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="occupyMachineCost" label="占机器人成本（元/月）" prop="occupyMachineCost">
                        <a-input-number 
                            id="occupyMachineCostNumber" 
                            v-model="form.occupyMachineCost" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入占机器人成本"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="operatingIncome" label="运作收入（元/月）" prop="operatingIncome">
                        <a-input-number 
                            id="operatingIncomeNumber" 
                            v-model="form.operatingIncome" 
                            :precision="precision" 
                            :min="0"
                            :max="2147483647"
                            style="width:100%;" 
                            placeholder="请输入运作收入"
                        />
                    </a-form-model-item>

                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="onSubmit">
                            确定
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="cancelForm">
                            取消
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-drawer>
        </div>
        <div class="data_source_list">
            <div class="data_source_details">
                <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                <a-table 
                    :loading="tableLoading"
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    :scroll="xScroll"
                    >
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <span style="margin-right:8px;" @click="editDrawer(record)">修改</span>
                    </a>
                </a-table>
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            <!-- 批量删除对话框 -->
            <a-modal
                title="批量删除"
                :visible="batchDeleteVisible"
                :confirm-loading="batchDeleteConfirmLoading"
                @ok="batchDeleteHandleOk"
                @cancel="batchDeleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            ellipsis: true,
            width: '80px',
            customRender:(taxe,records,index)=>`${index + 1}`
        },
        {
            title: '仓库面积(m²)',
            dataIndex: 'area',
            key: 'area',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '最大箱数',
            dataIndex: 'capacity',
            key: 'capacity',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: 'PS运管箱数',
            dataIndex: 'psBoxQty',
            key: 'psBoxQty',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: 'PS运管机数',
            dataIndex: 'psMachineQty',
            key: 'psMachineQty',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '仓库租金',
            dataIndex: 'whRent',
            key: 'whRent',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '设备租金',
            dataIndex: 'equipmentRent',
            key: 'equipmentRent',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '设备折旧',
            dataIndex: 'equipmentDepreciation',
            key: 'equipmentDepreciation',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '占箱成本',
            dataIndex: 'occupyBoxCost',
            key: 'occupyBoxCost',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '占拖成本',
            dataIndex: 'occupyTrayCost',
            key: 'occupyTrayCost',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '机器人成本',
            dataIndex: 'occupyMachineCost',
            key: 'occupyMachineCost',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '运作收入',
            dataIndex: 'operatingIncome',
            key: 'operatingIncome',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: 'action', 
            key: 'action', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
            width: '100px',
            fixed:'right'
        },
    ];

    import TopSelect from '../../meter/TopSelect'
    import BottomPagination from '../../meter/BottomPagination'
    import { getWHList, createWH, editWH, deleteWH } from '@/api/api'
    import moment from 'moment'//导入文件

    export default {
        name: "BasicConfigure",
        components: {
            TopSelect,
            BottomPagination   
        },
        data () {
            return {
                minNumber: 0, 
                precision: 2,
                nameText: '', // 数据源类型名称/编码
                data: [],
                columns,
                xScroll: {
                    x: 1980,
                },
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                regionName: '', // 大区名称
                cityName: '', // 城市名称
                warehouseName: '', // 仓库名称
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                createBy: '', // 创建人
                createTime: [], // 创建时间
                updateBy: '', // 修改人
                updateTime: [], // 修改时间
                createTime_begin: '', // 创建时间开始时间
                createTime_end: '', // 创建时间结束时间
                updateTime_begin: '', // 修改时间开始时间
                updateTime_end: '', // 修改时间结束时间
                dateFormat: 'YYYY-MM-DD HH:mm:ss',
                pageNo: 1,
                pageSize: 10,
                total: 0,
                visible: false,
                validStatus:true,
                placement: 'right',
                drawerTitle: '新增仓库配置',
                labelCol: { span: 8 },  
                wrapperCol: { span: 16 },
                other: '',
                form: {
                    area: '',
                    capacity: '',
                    psBoxQty:'',
                    psMachineQty:'',
                    whRent:'',
                    equipmentRent:'',
                    equipmentDepreciation:'',
                    occupyBoxCost:0,
                    occupyTrayCost:0,
                    occupyMachineCost:0,
                    operatingIncome:0,
                },
                rules: {
                    psBoxQty: [
                        { required: true, message: '请输入PS运管箱数', trigger: 'blur' },
                    ],
                    psMachineQty: [
                        { required: true, message: '请输入PS运管机数', trigger: 'blur' },
                    ],
                    whRent: [
                        { required: true, message: '请输入仓库租金', trigger: 'blur' },
                    ],
                    equipmentRent: [
                        { required: true, message: '请输入设备租金', trigger: 'blur' },
                    ],
                    equipmentDepreciation: [
                        { required: true, message: '请输入设备折旧', trigger: 'blur' },
                    ],
                    occupyBoxCost: [
                        { required: true, message: '请输入占箱成本', trigger: 'blur' },
                    ],
                    occupyTrayCost: [
                        { required: true, message: '请输入占拖成本', trigger: 'blur' },
                    ],
                    occupyMachineCost: [
                        { required: true, message: '请输入占机器人成本', trigger: 'blur' },
                    ],
                    operatingIncome: [
                        { required: true, message: '请输入运作收入', trigger: 'blur' },
                    ],
                },
                editVisible: false, // 确认删除对话框
                batchDeleteVisible: false, // 批量删除
                batchDeleteConfirmLoading: false,
                id: '',
            }
        },
        created() {
            
        },
        methods: {
            moment,
            // 获取获取列表数据接口
            getWHList() {
                let params = {
                    // region: this.regionName,
                    // city: this.cityName,
                    // name: this.warehouseName,
                    regionId: this.regionId,
                    cityId: this.cityId,
                    organizeId: this.organizeId,
                    createBy: this.createBy,
                    updateBy: this.updateBy,
                    createTime_begin: this.createTime_begin,
                    createTime_end: this.createTime_end,
                    updateTime_begin: this.updateTime_begin,
                    updateTime_end: this.updateTime_end,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    delFlag: 0,
                }
                this.tableLoading = true
                getWHList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result.records
                        this.total = res.result.total
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 搜索
            onSearch() {
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    this.getWHList()
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.$refs.topSelect.onReset()
                this.createBy = ''
                this.createTime = []
                this.updateBy = ''
                this.updateTime = []
                this.createTime_begin = ''
                this.createTime_end = ''
                this.updateTime_begin = ''
                this.updateTime_end = ''
                this.createTime_begin = ''
                this.createTime_end = ''
                this.updateTime_begin = ''
                this.updateTime_end = ''
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 职位
            positionHandleChange(value) {
                console.log(`selected ${value}`);
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取当前总部id
            getHeadId(data) {
                this.headquartersId = data
            },
            // 获取当前大区id
            getRegionId(data) {
                this.regionId = data
                this.$refs.topSelect.clearRegion()
            },
            // 获取当前城市id
            getCityId(data) {
                this.cityId = data
                this.$refs.topSelect.clearCity()
            },
            // 获取当前仓库id
            getWareId(data) {
                this.organizeId = data
                this.pageNo = 1
                this.pageSize = 10

                // 当大区、城市、仓库都存在且都只有一个的时候自动请求列表
                if( this.regionId && this.cityId && this.organizeId ){
                    this.getWHList()
                }
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getWHList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getWHList()
            },
            // 创建时间
            createChange(value, dateString) {
                this.createTime = value
                this.createTime_begin = dateString[0]
                this.createTime_end = dateString[1]
            },
            createOk(value) {
                console.log('onOk: ', value); 
            },
            // 修改时间
            editChange(value, dateString) {
                this.updateTime = value
                this.updateTime_begin = dateString[0]
                this.updateTime_end = dateString[1]
            },
            editOk(value) {
                console.log('onOk: ', value);
            },
            // 新增收支项
            showDrawer() {
                this.visible = true;
                this.drawerTitle = '新增仓库配置'
            },
            onClose() {
                this.visible = false;
            },
            // 修改收支项
            editDrawer(record) {
                this.visible = true;
                this.drawerTitle = '修改仓库配置'
                this.id =record.id
                this.form.area = record.area
                this.form.capacity = record.capacity
                this.form.psBoxQty = record.psBoxQty
                this.form.psMachineQty = record.psMachineQty
                this.form.whRent = record.whRent
                this.form.equipmentRent = record.equipmentRent
                this.form.equipmentDepreciation = record.equipmentDepreciation
                if(!record.occupyBoxCost){
                    this.form.occupyBoxCost = 0
                }
                if(!record.occupyTrayCost){
                    this.form.occupyTrayCost = 0
                }
                if(!record.occupyMachineCost){
                    this.form.operatingIncome = 0
                }
                if(!record.operatingIncome){
                    this.form.operatingIncome = 0
                }
                // 只有验证失败，新增的时候才重置验证状态
                if(this.validStatus === false) {
                    this.$refs.ruleForm.resetFields()
                }
            },
            // 表单
            onSubmit() {
                // if(this.form.area === null && this.form.capacity === null){
                    // this.$message.warning('仓库面积和最大箱数请至少填写一个！')
                // }else{
                    if(this.form.area < 0 || this.form.capacity < 0){
                        this.$message.warning('仓库面积和最大箱数不能填写负数！')
                    }else{
                        this.$refs.ruleForm.validate(valid => {
                            if (valid) {
                                this.validStatus = true
                                let params = {
                                    id: this.id,
                                    area: this.form.area,
                                    capacity: this.form.capacity,
                                    psBoxQty: this.form.psBoxQty,
                                    psMachineQty: this.form.psMachineQty,
                                    whRent: this.form.whRent,
                                    equipmentRent: this.form.equipmentRent,
                                    equipmentDepreciation: this.form.equipmentDepreciation,
                                    occupyBoxCost: this.form.occupyBoxCost,
                                    occupyTrayCost: this.form.occupyTrayCost,
                                    occupyMachineCost: this.form.occupyMachineCost,
                                    operatingIncome: this.form.operatingIncome,
                                }
                                editWH(params).then((res)=>{
                                    if(res.success){
                                        this.getWHList()
                                        this.visible = false;
                                        this.$message.warning('保存成功！')
                                    }else{
                                        this.$message.warning(res.message)
                                    }
                                })
                            } else {
                                this.validStatus = false
                                return false;
                            }
                        })
                    }
                    
                // }
            },
            cancelForm() {
                this.visible = false;
            },

            // 日期
            dateOnChange(date, dateString) {
                console.log(date, dateString);
            },
            // 上班打卡时间
            startOnChange(time, timeString) {
                console.log(time, timeString);
            },
            // 下班打卡时间
            endOnChange(time, timeString) {
                console.log(time, timeString);
            },
            // 批量删除
            batchDelete() {
                this.batchDeleteVisible = true
            },
            batchDeleteHandleOk(e) {
                this.batchDeleteConfirmLoading = true;
                let params = {
                    ids: this.selectedRowKeys.join(','),
                }
                deleteWH(params).then((res)=>{
                    if(res.success){
                        this.batchDeleteVisible = false;
                        this.batchDeleteConfirmLoading = false;
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        this.deletdBtnShow = false
                        this.getWHList()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            batchDeleteHandleCancel(e) {
                this.batchDeleteVisible = false;
            },
            // 面积
            areaChange(value) {
                console.log('changed', value);
            },
            // 箱数
            capacityChange(value) {
                console.log('changed', value);
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .basicConfigure{
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>